<template>
  <div id="windowFileManage">
    <el-input v-model="fileNameSearchKeyword" @keydown.enter="fileSearch_func" placeholder="搜索文件名">
      <template #append>
        <el-button text @click="fileSearch_func">
          <el-icon>
            <Search/>
          </el-icon>
        </el-button>
      </template>
    </el-input>
    <el-tree ref="fileManageTree" :props="defaultProps" :data="data_file_tree" :filter-node-method="fileSearch"
             @node-click="fileTreeClickLeft" @node-contextmenu="fileTreeClickRight" show-checkbox class="fileTree"
             :highlight-current="true" node-key="path" draggable>
      <template #default="{ node }">
        <span class="custom-tree-node">
          <span>
            <span v-if="node.isLeaf"><el-icon><Document/></el-icon></span>
            <span v-if="!node.isLeaf"><el-icon><FolderOpened/></el-icon></span>
            <span v-if="node.label==='file_download'" class="file_type_upload">（文件下载）</span>
            <span v-if="node.label==='file_upload'" class="file_type_upload">（文件上传）</span>
            <span v-if="node.label==='source_gitee'" class="file_type_src_gitee">（码云源码）</span>
            <span v-if="node.label==='source_rpm'" class="file_type_src_release">（RPM提取）</span>
            <span v-if="node.label==='log_cmd_run'" class="file_type_log_running">（任务日志）</span>
            <span v-if="node.label==='msg_obj'" class="file_type_log">（消息日志）</span>
            <span v-if="node.label==='setting_obj'" class="file_type_setting">（设置文件）</span>
            <span>{{ node.label }}</span>
          </span>
        </span>
      </template>
    </el-tree>
    <div id="menuRight" v-show="menuRightVisible">
      <div class="menuRightChoice" @click="path_package4spec">
        <span class="menuRightChoice_icon"><el-icon><Box/></el-icon></span>打包RPM
      </div>
      <div class="menuRightChoice" @click="path_rpm_release">
        <span class="menuRightChoice_icon"><el-icon><Unlock/></el-icon></span>提取
      </div>
      <div class="menuRightChoice" @click="path_compile">
        <span class="menuRightChoice_icon"><el-icon><Orange/></el-icon></span>编译
      </div>
      <div class="menuRightChoice" @click="path_rsync">
        <span class="menuRightChoice_icon"><el-icon><Refresh/></el-icon></span>同步
      </div>
      <div class="menuRightChoice" @click="path_delete">
        <span class="menuRightChoice_icon"><el-icon><Delete/></el-icon></span>删除
      </div>
      <div class="menuRightChoice" @click="path_file_diff">
        <span class="menuRightChoice_icon"><el-icon><Switch/></el-icon></span>对比
      </div>
      <div class="menuRightChoice" @click="path_download">
        <span class="menuRightChoice_icon"><el-icon><Download/></el-icon></span>下载
      </div>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import FileTranFunction from "@/utils/file_tran";
import {ElNotification} from 'element-plus'
import {
  FolderOpened,
  Document,
  Delete,
  Refresh,
  Orange,
  Unlock,
  Box,
  Search,
  Switch,
  Download
} from '@element-plus/icons-vue'

import CheckFunction from "@/utils/check";

export default {
  name: "windowFileManage",
  props: {
    sessionToken: String,
    // mainWindow_obj
  },
  components: {
    FolderOpened,
    Document,
    Delete,
    Refresh,
    Orange,
    Unlock,
    Box,
    Search,
    Switch,
    Download
  },
  data() {
    return {
      menuRightVisible: false,
      menuRightTreeNode: null,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      data_file_tree: [{"label": "目录树"}],
      fileNameSearchKeyword: ""
    }
  },
  methods: {
    fileSearch(value, data) {
      if (!value) return true
      return data.label.includes(value)
    },
    fileSearch_func() {
      this.$refs.fileManageTree.filter(this.fileNameSearchKeyword)
    },
    fileTreeClickLeft(node) {
      if (node.editable === true)
        this.$store.state.obj_windowEditorManage.addTab_editor_file_out(node.label, node.path)
    },
    fileTreeClickRight(MouseEvent, object, node) {
      this.menuRightTreeNode = node
      this.menuRightVisible = true;
      let menu = document.querySelector("#menuRight");
      menu.style.cssText = "left: " + (MouseEvent.clientX - 3) + 'px' + "; top: " + (MouseEvent.clientY - 3) + 'px;';
    },
    fileTreeNodeActivate(key) {
      this.$refs.fileManageTree.setCurrentKey(key)
    },
    path_rpm_release() {
      console.log(this.menuRightTreeNode, "提取")
      ElNotification({
        title: "RPM包提取功能未实现",
        type: 'error',
        duration: 1000,
      })
      this.menuRightVisible = false;
    },
    path_compile() {
      console.log(this.menuRightTreeNode, "编译")
      ElNotification({
        title: "编译功能未实现",
        type: 'error',
        duration: 1000,
      })
      this.menuRightVisible = false;
    },
    path_package4spec() {
      console.log("打包SPEC")
      this.menuRightVisible = false;
      if (this.menuRightTreeNode.data.isdir === false) {
        ElNotification({
          title: "非目录",
          type: 'error',
          duration: 1000,
        })
        return
      }
      if (!CheckFunction.CheckIsDirForSPEC(this.menuRightTreeNode.data.children)) {
        ElNotification({
          title: "未找到SPEC文件",
          type: 'error',
          duration: 1000,
        })
        return
      }
      this.$store.state.obj_windowEditorManage.addTab_package_spec_page_out(this.menuRightTreeNode.data.path, this.menuRightTreeNode.data.label)
    },
    path_rsync() {
      // console.log(this.menuRightTreeNode, "同步")
      this.menuRightVisible = false;
      let obj_this = this
      let data = {
        "session_token": obj_this.sessionToken,
      }
      axios.post('/get_file_tree_by_session_token', data).then(function (response) {
        obj_this.data_file_tree = response.data.data[0].children
        // console.log(obj_this.data_file_tree)
        ElNotification({
          title: "目录树加载完成",
          type: 'success',
          duration: 1000,
        })
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    path_delete() {
      console.log(this.menuRightTreeNode, "删除")
      ElNotification({
        title: "删除功能未实现",
        type: 'error',
        duration: 1000,
      })
      this.menuRightVisible = false;
    },
    path_download() {
      console.log(this.menuRightTreeNode, "下载")
      FileTranFunction.move_file2next_server4package("http://localhost:8091/download_file", "http://localhost:8082/rpmbuild_bs_by_tar_gz")
      this.menuRightVisible = false;
    },
    path_file_diff() {
      console.log("对比")
      let checked_nodes = this.$refs.fileManageTree.getCheckedNodes()
      if (checked_nodes.length !== 2) {
        ElNotification({
          title: "需要选择两个文本文件才可以进行对比，当前已选择" + checked_nodes.length + "个！",
          type: 'error',
          duration: 5000,
        })
        return
      }
      for (let i = 0; i < checked_nodes.length; i++) {
        if (checked_nodes[i].isdir) {
          ElNotification({
            title: "不能选择目录进行对比！",
            type: 'error',
            duration: 5000,
          })
          return
        }
      }
      for (let i = 0; i < checked_nodes.length; i++) {
        console.log(checked_nodes[i].path)
      }
      this.$store.state.obj_windowEditorManage.addTab_diff_show_out("", checked_nodes[0].path, checked_nodes[1].path)
      this.menuRightVisible = false;
    },
  },
  mounted() {
    let obj_this = this
    obj_this.path_rsync()
    document.addEventListener('click', function () {
      obj_this.menuRightVisible = false
    })
  },
  watch: {
    fileNameSearchKeyword: function (newValue) {
      if (newValue === "")
        this.fileSearch_func()
    }
  }
}
</script>

<style scoped>
#windowFileManage {
}

#menuRight {
  z-index: 999;
  width: 150px;
  position: fixed;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 3px;
  border: 2px solid rgba(128, 128, 128, 0.42);
  background-color: #f6f6f6;
}

.menuRightChoice {
  cursor: pointer;
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  transition: 0.5s;
}

.menuRightChoice:hover {
  background-color: #83c3f8;
}

.menuRightChoice_icon {
  display: inline-block;
  width: 20px;
}

.fileTree span {
  font-size: 11px;
  display: inline;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 5px;
}

#windowFileManage /deep/ .el-tree-node.is-expanded > .el-tree-node__children {
  display: inline;
}


.file_type_upload {
  color: purple;
  font-weight: bold;
}

.file_type_src_gitee {
  color: #005bf5;
  font-weight: bold;
}

.file_type_src_release {
  color: #005bf5;
  font-weight: bold;
}

.file_type_log {
  color: #ff0000;
  font-weight: bold;
}

.file_type_log_running {
  color: #ff0000;
  font-weight: bold;
}

.file_type_setting {
  color: #098c00;
  font-weight: bold;
}
</style>